<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

  <style>
    header a {
      text-decoration: none;
      color: #6c6c6c;
    }

    .c1 {
      padding-right: 30px;
    }

    #background {
      background-image: url("imgs/background.png");
      background-repeat: no-repeat;
      background-size: 100%;
      overflow: hidden;
    }

    #login {
      width: 600px;
      height: 400px;
      margin: 100px auto;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .el-main {
      padding: 0;
      height: 550px;
      overflow: visible;
    }

    #login-links {
      width: 400px;
      height: 18px;
      padding-left: 146px;
    }

    #login-links a {
      text-decoration: none;
      font-weight: bold;
    }
    .el-footer{
      text-align: center;
    }
    .footerImg {
      height: 30px;
      padding-right: 10px;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <div style=";height: 64px;
                 background: #fff;">
        <div style="float: left;margin-right: 220px;margin-top: 4px">
          <img src="imgs/logo.png" style="width: 50px;height: 50px" alt="">
          <img src="imgs/abc.png" style="width: 120px;height: 40px" alt="">
        </div>
        <div style="float: left;margin-top: 16px;">
          <a href="" class="c1">首页</a>
          <a href="" class="c1">热点资讯</a>
          <a href="" class="c1">商家入驻</a>
          <a href="" class="c1">社会招聘</a>
          <a href="" class="c1">校园招聘</a>
          <a href="">帮助</a>
        </div>
        <div style="float: right;margin-top: 16px">
          <i class="el-icon-s-comment"></i>
          <a href="" style="font-size: 10px">登陆页面改进建议</a>
          <i class="el-icon-phone"></i>
          <a href="" style="font-size: 10px">xxx-xxxxxxx</a>
        </div>
      </div>
    </el-header>
    <el-main>
      <div id="background">
        <div>
          <el-card id="login">
            <!--label-width设置用户名这一列所占的宽度,如果不设置会显示在上面-->
            <el-form label-width="70px" style="width: 400px;margin: 60px auto">
              <el-form-item label="用户名">
                <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input type="password" v-model="user.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input type="password" v-model="user.address" placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 80px">
                <el-button type="warning" @click="reg()">立即注册</el-button>
              </el-form-item>
            </el-form>
          </el-card>

        </div>
      </div>
    </el-main>
    <el-footer>
      <div style="margin-bottom: 30px;margin-top: 20px">
        <i class="el-icon-chat-line-square"></i>
        <el-link href="" target="_blank">公告1</el-link>
        <i class="el-icon-chat-line-square"></i>
        <el-link href="" target="_blank">公告2</el-link>
        <i class="el-icon-chat-line-square"></i>
        <el-link href="" target="_blank">公告3</el-link>
      </div>
      <div style="width: 900px;margin: 0 auto">
        <a href="">
          <img class="footerImg" src="imgs/A.png" alt="">
        </a>
        <a href="">
          <img class="footerImg" src="imgs/B.png" alt="">
        </a>
        <a href="">
          <img class="footerImg" src="imgs/C.png" alt="">
        </a>
        <a href="">
          <img class="footerImg" src="imgs/D.png" alt="">
        </a>
        <a href="">
          <img class="footerImg" src="imgs/E.png" alt="">
        </a>
        <a href="https://www.12377.cn/?spm=a2107.1.0.0.1a9a11d98QJcLg">
          <img class="footerImg" src="imgs/F.png" alt="">
        </a>
        <a href="https://www.12377.cn/?spm=a2107.1.0.0.1a9a11d98QJcLg">
          <img class="footerImg" src="imgs/G.png" alt="">
        </a>
        <a href="https://www.12377.cn/node_548446.htm?spm=a2107.1.0.0.1a9a11d98QJcLg">
          <img class="footerImg" src="imgs/H.png" alt="">
        </a>
        <a href="" style="width:97px;height: 40px;">
          <img class="footerImg" src="imgs/I.png" alt="">
        </a>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<script src=" https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        info: "请输入11手机号",
        isShow: false,
        user: {
          username: "",
          password: "",
          phoneNumber: "",
          address: "",
          money: ""
        },
        myUser: {
          username: "",
          password: "",
          phoneNumber: ""
        }
      }
    },
    methods: {
      reg() {
        v.isShow = true;
        if (v.user.phoneNumber == "") {
          v.info = "手机号不能为空";
        } else {
          axios.post("/user/reg", v.user).then(function (response) {
            if (response.data == 1) {
              v.isShow = false;
              location.reload();
            } else {
              alert("注册失败,用户已存在");
            }
          })
        }
      }
    },
    created: function () {

    }
  })
</script>
</html>